<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <link th:href="@{/css/main/style.css}" rel="stylesheet" type="text/css"/>
    <div th:include="common.html"></div>
    <title>Title</title>
</head>

<body>

<div id="app" class="container-fluid">
    <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">功能组</button>
    <div id="demo" class="collapse">
        <button type="button" class="btn btn-success btn-round btn-sm"  style="margin-top: 10px"
                @click="openAdd">
            <span class="glyphicon glyphicon-plus">添加角色</span>
        </button>
        <button type="button" class="btn btn-danger btn-round btn-sm"  style="margin-top: 10px">
            <span class="glyphicon glyphicon-trash">批量删除角色</span>
        </button>
        <ul>
            <li><input type="text" class="form-control" style="width: 400px;height: 40px;margin-left: 400px" v-model="name" placeholder = '请输入角色名查询！'></li>
            <li><button class="btn btn-primary btn-round btn-sm" type="button" @click="selectData">
                <span class="glyphicon glyphicon-search">查询角色</span>
            </button></li></ul>
    </div>
    <a-table
            style="padding-top: 30px;margin: auto;width: 1000px;"
            row-Key="id"
            :columns="columns"
            :data-source="dataSources"
            :pagination="pagination"
            :row-Selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :custom-Row="customRow"
            bordered
      >
         <span slot="action" slot-scope="record" style="width: 100px">
            <a-button size="small" type="primary"  @click.stop="openShouQuan(record)">授权</a-button>
            <a-button size="small" type="primary"  @click.stop="openUpdate(record)">编辑</a-button>

             <a-button size="small" type="danger"  @click.stop="deleteData(record.id)">删除</a-button>
        </span>
    </a-table>


    <!--bootstrap的模态对话框-->
    <div id="myModal" class="modal fade" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header bg-primary" style="background: #F45B4B;" >
                <h4 class="text-white">角色添加</h4>
                <button type="button" class="close text-white" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
              <form role="form" id="userAddForm">
                <div class="form-group">
                    <label>角色名称</label>
                    <input type="text" name="name" id="name" class="form-control" v-model="name">
                </div>
                  <div class="form-group">
                    <label>奖金</label>
                    <input type="text" name="bonus" id="bonus" class="form-control" v-model="bonus">
                </div>
                <div class="form-group">
                    <label>备注</label>
                    <textarea type="text" name="beizhu" id="beizhu" class="form-control" v-model="beizhu"></textarea>
                </div>
            </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" >关闭</button>
                <button type="button" class="btn btn-primary"  @click="operate()" >提交</button>
            </div>
         </div>

      </div>

    </div>

    <div id="shouQuanModal" class="modal fade" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-primary" >
                    <h4 class="text-white">角色授权</h4>
                    <button type="button" class="close text-white" data-dismiss="modal"
                            aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <form role="form" id="shouquanForm">
                        <label >权限菜单：</label>
                        <div >
                            <template>
                                <a-tree-select
                                        id="tree"
                                        v-model="menuids"
                                        show-search
                                        multiple
                                        style="width: 100%"
                                        tree-Node-Filter-Prop="title"
                                        :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }"
                                        placeholder="请选择"
                                        :tree-data="treeData"
                                        tree-data-simple-mode
                                        allow-clear
                                        tree-default-expand-all
                                        @change="orgTreeChange"
                                >
                                </a-tree-select>
                            </template>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" >关闭</button>
                    <button type="button" class="btn btn-primary"  @click="operate()" >提交</button>
                </div>
            </div>

        </div>

    </div>
</div>
<script th:src="@{/myjs/role/main.js}"></script>
</body>
</html>
